*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

.container{
  width: 400px;
  margin: 0 auto;
}

h2{
  padding: 90px 0;
  text-align: center;
}

ul{
  margin: 0;
  background-color: #FFF;
  border: 1px solid #ddd;
}

ul li{
  list-style: none;
  position: relative;
  overflow: hidden;   
  border-top: 1px solid #ddd;

  &:first-child{
    border-top:none;
  }
}

ul li a{
  display: block;
  padding: 18px 20px;
}

ul li .animate{
  animation: ripple 0.65s linear;
}

.ink{
  display: block;
  position: absolute;
  background-color: red;
  border-radius:100%;
  -webkit-transform: scale(0);
     -moz-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}

@keyframes ripple{
  100% {opacity: 0;-webkit-transform: scale(2.5);
     -moz-transform: scale(2.5);
      -ms-transform: scale(2.5);
       -o-transform: scale(2.5);
          transform: scale(2.5);}
}

@-webkit-keyframes ripple{
  100% {opacity: 0;-webkit-transform: scale(2.5);
     -moz-transform: scale(2.5);
      -ms-transform: scale(2.5);
       -o-transform: scale(2.5);
          transform: scale(2.5);}
}